import * as React from "react";
import { Dimensions, View, StyleSheet } from "react-native";
import { Svg, DangerZone } from "expo";

import Cursor from "./Cursor";
import { normalizeAngle } from "./Math";

const { Animated } = DangerZone;
const {
  Value, multiply, sub, concat, lessThan, cond, and, greaterOrEq, block, debug, modulo, sqrt, add, or,
} = Animated;

const { width } = Dimensions.get("window");
const size = width - 32;
const padding = 25;
const radius = size / 2 - padding;
const {
  Defs, LinearGradient, Stop, Circle, G, Path,
} = Svg;
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default () => {
  const start = new Value(0);
  const end = new Value(0);
  const circumference = radius * 2 * Math.PI;
  const delta = sub(cond(lessThan(start, end), end, add(end, Math.PI * 2)), start);
  const strokeDashoffset = multiply(delta, radius);
  const rotateZ = concat(sub(Math.PI * 2, start), "rad");
  return (
    <View style={styles.container}>
      <Animated.View style={{
        ...StyleSheet.absoluteFillObject,
        transform: [
          { rotateZ },
        ],
      }}
      >
        <Svg width={size} height={size}>
          <Defs>
            <LinearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
              <Stop offset="0" stopColor="#f7cd46" />
              <Stop offset="1" stopColor="#ef9837" />
            </LinearGradient>
          </Defs>
          <AnimatedCircle
            strokeWidth={padding * 2}
            stroke="rgb(50, 50, 50)"
            fill="none"
            cx={size / 2}
            cy={size / 2}
            r={radius}
          />
          <AnimatedCircle
            strokeWidth={padding * 2}
            stroke="url(#grad)"
            fill="none"
            cx={size / 2}
            cy={size / 2}
            r={radius}
            strokeDasharray={`${circumference}, ${circumference}`}
            {...{ strokeDashoffset }}
          />
        </Svg>
      </Animated.View>
      <Animated.View style={{ ...StyleSheet.absoluteFillObject, justifyContent: "center", alignItems: "center" }}>
        <Svg width={size - padding * 4} height={size - padding * 4} viewBox="0 0 88 88">
          <Path fill="white" d="M44 8.375a1 1 0 0 0 1-1V1.333a1 1 0 0 0-2 0v6.042a1 1 0 0 0 1 1zM24.822 12.781a1 1 0 1 0 1.732-1l-3.021-5.232a1 1 0 1 0-1.732 1l3.021 5.232zM6.552 23.53l5.232 3.021a.997.997 0 0 0 1.366-.366 1 1 0 0 0-.366-1.366l-5.232-3.021a1 1 0 1 0-1 1.732zM7.378 44.995a1 1 0 0 0 0-2l-6.043.001a1 1 0 0 0 0 2l6.043-.001zM13.149 61.805a.998.998 0 0 0-1.366-.366l-5.234 3.022a1 1 0 1 0 1 1.732l5.234-3.022a1 1 0 0 0 .366-1.366zM26.187 74.843a1 1 0 0 0-1.366.366l-3.022 5.235a1 1 0 0 0 1.732 1l3.022-5.235a1 1 0 0 0-.366-1.366zM43.996 79.617a1 1 0 0 0-1 1l.001 6.045a1 1 0 1 0 2 0l-.001-6.045a1 1 0 0 0-1-1zM63.172 75.211a.999.999 0 1 0-1.732 1l3.025 5.235a1 1 0 1 0 1.732-1l-3.025-5.235zM81.448 64.463l-5.238-3.021a1 1 0 1 0-1 1.732l5.238 3.021a1 1 0 0 0 1-1.732zM86.664 42.997L80.616 43a1 1 0 0 0 .001 1.999h.001l6.047-.003a1 1 0 0 0-.001-1.999zM74.849 26.191a1 1 0 0 0 1.366.366l5.234-3.026a.998.998 0 0 0 .364-1.366.998.998 0 0 0-1.366-.365l-5.234 3.026a.997.997 0 0 0-.364 1.365zM61.812 13.152a.998.998 0 0 0 1.366-.366l3.021-5.238a1 1 0 1 0-1.732-.999l-3.021 5.238a.997.997 0 0 0 .366 1.365zM39.871 5.216a.5.5 0 0 0 .498-.552l-.332-3.148a.5.5 0 1 0-.994.104l.332 3.148a.499.499 0 0 0 .496.448zM35.299 5.466a.5.5 0 0 0 .978-.208l-.659-3.097a.5.5 0 0 0-.978.209l.659 3.096zM31.319 6.587a.5.5 0 0 0 .952-.309l-.979-3.011a.5.5 0 0 0-.951.309l.978 3.011zM27.479 8.117a.5.5 0 0 0 .913-.407l-1.289-2.893a.5.5 0 1 0-.913.407l1.289 2.893zM20.381 12.335a.498.498 0 0 0 .698.11.498.498 0 0 0 .11-.698l-1.862-2.561a.499.499 0 1 0-.808.588l1.862 2.561zM15.824 11.956a.5.5 0 1 0-.744.67l2.12 2.353a.501.501 0 0 0 .744-.67l-2.12-2.353zM14.315 17.938a.498.498 0 0 0 .706-.038.5.5 0 0 0-.037-.706l-2.354-2.118a.5.5 0 1 0-.669.743l2.354 2.119zM11.754 21.184a.497.497 0 0 0 .698-.112.5.5 0 0 0-.111-.698l-2.563-1.86a.5.5 0 0 0-.587.809l2.563 1.861zM4.821 27.1l2.895 1.287a.504.504 0 0 0 .661-.254.5.5 0 0 0-.254-.66l-2.895-1.287a.5.5 0 1 0-.407.914zM3.27 31.288l3.014.978a.5.5 0 0 0 .309-.952l-3.014-.978a.5.5 0 1 0-.309.952zM2.164 35.615l3.1.658a.5.5 0 0 0 .208-.978l-3.1-.658a.5.5 0 1 0-.208.978zM1.516 40.033l3.152.33a.5.5 0 0 0 .105-.994l-3.152-.33a.485.485 0 0 0-.549.445c-.03.275.17.521.444.549zM5.217 48.07a.5.5 0 0 0-.549-.444l-3.151.332a.499.499 0 1 0 .105.994l3.151-.332a.499.499 0 0 0 .444-.55zM5.855 52.102a.505.505 0 0 0-.593-.385l-3.1.659a.5.5 0 0 0 .208.978l3.1-.659a.5.5 0 0 0 .385-.593zM6.912 56.045a.498.498 0 0 0-.63-.321l-3.015.979a.499.499 0 0 0 .155.976.515.515 0 0 0 .154-.024l3.015-.979a.5.5 0 0 0 .321-.631zM8.375 59.855a.501.501 0 0 0-.66-.254L4.819 60.89a.5.5 0 0 0 .407.914l2.896-1.289a.5.5 0 0 0 .253-.66zM12.45 66.915a.498.498 0 0 0-.698-.11l-2.564 1.863a.5.5 0 1 0 .588.808l2.564-1.863a.499.499 0 0 0 .11-.698zM15.019 70.087a.5.5 0 0 0-.706-.037l-2.356 2.121a.501.501 0 0 0 .669.744l2.356-2.121a.501.501 0 0 0 .037-.707zM17.199 73.011l-2.122 2.355a.5.5 0 0 0 .743.67l2.122-2.355a.5.5 0 0 0-.743-.67zM20.379 75.653l-1.864 2.564a.499.499 0 1 0 .808.588l1.864-2.564a.499.499 0 1 0-.808-.588zM28.137 79.619a.5.5 0 0 0-.66.254l-1.29 2.896a.5.5 0 1 0 .913.406l1.29-2.896a.5.5 0 0 0-.253-.66zM31.948 81.082a.5.5 0 0 0-.63.321l-.98 3.016a.5.5 0 0 0 .952.308l.98-3.016a.502.502 0 0 0-.322-.629zM35.89 82.139a.503.503 0 0 0-.593.385l-.66 3.102a.501.501 0 0 0 .978.209l.66-3.102a.5.5 0 0 0-.385-.594zM39.921 82.778a.5.5 0 0 0-.549.444l-.332 3.152a.5.5 0 0 0 .995.106l.332-3.152a.5.5 0 0 0-.446-.55zM48.074 82.778a.498.498 0 0 0-.445.549l.331 3.153a.498.498 0 0 0 .549.445.498.498 0 0 0 .445-.549l-.331-3.153a.499.499 0 0 0-.549-.445zM52.698 82.525a.51.51 0 0 0-.593-.386.5.5 0 0 0-.386.593l.659 3.102a.5.5 0 0 0 .979-.208l-.659-3.101zM56.678 81.404a.5.5 0 1 0-.951.309l.98 3.016a.5.5 0 1 0 .951-.308l-.98-3.017zM60.519 79.874a.5.5 0 0 0-.914.406l1.29 2.896a.5.5 0 1 0 .914-.406l-1.29-2.896zM67.616 75.655a.5.5 0 1 0-.808.588l1.864 2.564a.498.498 0 0 0 .698.11.5.5 0 0 0 .11-.698l-1.864-2.564zM70.796 73.013a.499.499 0 1 0-.742.67l2.122 2.355a.5.5 0 1 0 .742-.67l-2.122-2.355zM73.683 70.053a.5.5 0 1 0-.668.744l2.356 2.12a.496.496 0 0 0 .706-.038.499.499 0 0 0-.038-.706l-2.356-2.12zM76.244 66.809a.5.5 0 0 0-.588.808l2.565 1.861a.501.501 0 0 0 .698-.11.5.5 0 0 0-.11-.698l-2.565-1.861zM83.179 60.893l-2.896-1.287a.5.5 0 0 0-.406.914l2.896 1.287a.5.5 0 0 0 .406-.914zM84.73 56.705l-3.016-.978a.5.5 0 1 0-.309.951l3.016.978a.502.502 0 0 0 .63-.322.498.498 0 0 0-.321-.629zM85.836 52.378l-3.102-.657a.507.507 0 0 0-.593.386.5.5 0 0 0 .386.593l3.102.657a.5.5 0 0 0 .207-.979zM86.482 47.96l-3.152-.33a.498.498 0 0 0-.549.445.499.499 0 0 0 .445.549l3.152.33a.5.5 0 0 0 .104-.994zM82.782 39.923a.5.5 0 0 0 .55.444l3.151-.333a.5.5 0 1 0-.106-.994l-3.151.333a.5.5 0 0 0-.444.55zM82.144 35.892a.501.501 0 0 0 .593.385l3.1-.661a.5.5 0 0 0-.209-.977l-3.1.661a.498.498 0 0 0-.384.592zM81.088 31.948a.5.5 0 0 0 .631.321l3.013-.981a.5.5 0 0 0-.311-.951l-3.013.981a.5.5 0 0 0-.32.63zM79.625 28.137a.5.5 0 0 0 .661.253l2.894-1.29a.5.5 0 1 0-.408-.913l-2.894 1.291a.499.499 0 0 0-.253.659zM75.549 21.076a.498.498 0 0 0 .698.11l2.563-1.863a.5.5 0 1 0-.588-.808l-2.563 1.863a.5.5 0 0 0-.11.698zM72.98 17.904a.497.497 0 0 0 .706.038l2.354-2.121a.499.499 0 0 0 .036-.706.499.499 0 0 0-.706-.037l-2.354 2.121a.5.5 0 0 0-.036.705zM70.429 15.146a.5.5 0 0 0 .372-.166l2.12-2.355a.5.5 0 1 0-.744-.669l-2.12 2.355a.5.5 0 0 0 .372.835zM67.216 12.544a.496.496 0 0 0 .404-.206l1.862-2.564a.5.5 0 1 0-.808-.588l-1.862 2.564a.501.501 0 0 0 .404.794zM59.862 8.373a.5.5 0 0 0 .66-.254l1.289-2.896a.5.5 0 0 0-.914-.407l-1.289 2.896a.5.5 0 0 0 .254.661zM56.052 6.91a.5.5 0 0 0 .63-.322l.979-3.014a.501.501 0 0 0-.321-.63.502.502 0 0 0-.63.321l-.98 3.015a.502.502 0 0 0 .322.63zM52.109 5.854a.5.5 0 0 0 .592-.385l.659-3.101a.5.5 0 1 0-.979-.208l-.659 3.101a.503.503 0 0 0 .387.593zM48.078 5.214a.5.5 0 0 0 .549-.445l.331-3.153a.498.498 0 0 0-.445-.549.496.496 0 0 0-.549.445l-.331 3.153a.498.498 0 0 0 .445.549z" />
        </Svg>
      </Animated.View>
      <Cursor angle={start} {...{ radius }} />
      <Cursor angle={end} {...{ radius }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: size,
    width: size,
  },
});
